<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<title>JAVAscript练习</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="shortcut icon" href="http://pengjianquan.pro.bluej.cn/resume/favicon.ico" />
		<link rel="stylesheet" type="text/css" href="../../index.css"/>
		<style>
			#div1> div,
			#div2> div,
			#div3> div {
				display: none;
				padding: 0px 0px 0px 40px;
				margin: 0px;
			}
			
			.box .btn {
				border-radius: 0;
			}
		</style>
	</head>

	<BODY>
		<pre><h1><a href="../../index.html">JAVAscript练习</a></h1></pre>
		<div id="div1" class="box box-re">
			1、选项卡 鼠标经过变换<br><br>
			<button type="button" class="btn btn-info.active">栏目一</button>
			<button type="button" class="btn btn-info">栏目二</button>
			<button type="button" class="btn btn-info">栏目三</button>
			<button type="button" class="btn btn-info">栏目四</button>
			<div class="alert-info" style="display: block;">栏目一的内容<br>栏目一的内容<br>栏目一的内容<br>栏目一的内容</div>
			<div class="alert-info">栏目二的内容<br>栏目二的内容<br>栏目二的内容<br>栏目二的内容</div>
			<div class="alert-info">栏目三的内容<br>栏目三的内容<br>栏目三的内容<br>栏目三的内容</div>
			<div class="alert-info">栏目四的内容<br>栏目四的内容<br>栏目四的内容<br>栏目四的内容</div>
		</div>

		<div id="div2" class="box box-re">
			2、选项卡 鼠标点击变换<br><br>
			<button type="button" class="btn btn-success.active">栏目一</button>
			<button type="button" class="btn btn-success">栏目二</button>
			<button type="button" class="btn btn-success">栏目三</button>
			<button type="button" class="btn btn-success">栏目四</button>
			<div class="alert-success" style="display: block;">栏目一的内容<br>栏目一的内容<br>栏目一的内容<br>栏目一的内容</div>
			<div class="alert-success">栏目二的内容<br>栏目二的内容<br>栏目二的内容<br>栏目二的内容</div>
			<div class="alert-success">栏目三的内容<br>栏目三的内容<br>栏目三的内容<br>栏目三的内容</div>
			<div class="alert-success">栏目四的内容<br>栏目四的内容<br>栏目四的内容<br>栏目四的内容</div>
		</div>

		<div id="div3" class="box box-re">
			3、选项卡 鼠标点击变换<br><br>
			<button type="button" class="btn btn-warning.active">栏目一</button>
			<button type="button" class="btn btn-warning">栏目二</button>
			<button type="button" class="btn btn-warning">栏目三</button>
			<button type="button" class="btn btn-warning">栏目四</button>
			<div class="alert-warning" style="display: block;">栏目一的内容<br>栏目一的内容<br>栏目一的内容<br>栏目一的内容</div>
			<div class="alert-warning">栏目二的内容<br>栏目二的内容<br>栏目二的内容<br>栏目二的内容</div>
			<div class="alert-warning">栏目三的内容<br>栏目三的内容<br>栏目三的内容<br>栏目三的内容</div>
			<div class="alert-warning">栏目四的内容<br>栏目四的内容<br>栏目四的内容<br>栏目四的内容</div>
		</div>

		<div id="Record" class="box box-re red">
			记录<br>
			<p><b>this：</b>当前发生事件的元素</p>
			<p><b>索引值：</b>需要知道是第几个的时候通过自定义的index属性（标签）定义当前激活的div，例如：aBtn1[i].index=i，在整个循环的开始加入。然后通过this.index来激活，例如：aDiv1[this.index].style。</p>
		</div>
	</BODY>

</HTML>